<template>
  <el-card>
    <div slot="header" class="clearfix custom-header">
      <span class="f16 fb"
        ><i
          class="el-icon-notebook-2 fb f18 text-blue mr5"
        />招聘数据明细表</span
      >
    </div>
    <div class="search-filter">
      <el-row :gutter="20">
        <el-col :span="7">
          姓名：
        <el-input
          v-model="listQuery.username"
          class="mr20"
          size="small"
          style="width: 70%"
          placeholder="请输入关键字"
        />
        </el-col>
        <el-col :span="3">
          <sitem>
            <el-button
              slot="item"
              v-waves
              type="primary"
              icon="el-icon-search"
              @click="handleFilter"
            >
              搜索
            </el-button>
          </sitem>
        </el-col>
        <el-col :span="3">
          <sitem>
            <el-button
              slot="item"
              v-waves
              type="primary"
              icon="el-icon-download"
              @click="exportExcel"
            >
              导出
            </el-button>
          </sitem>
        </el-col>
      </el-row>
    </div>

    <el-table ref="table" :data="list" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="username" label="姓名" width="70" />
      <el-table-column
        prop="sex"
        label="性别"
        align="center"
        width="50"
      />
      <el-table-column
        prop="birthDay"
        label="出生日期"
        align="center"
        width="95"
      />
      <el-table-column
        prop="birthPlace_dictText"
        label="籍贯"
        align="center"
        width="160"
      />
      <el-table-column
        prop="address"
        label="通讯地址"
        align="center"
        width="160"
      />
      <el-table-column
        prop="phone"
        label="电话"
        align="center"
        width="100"
      />
      <el-table-column
        prop="schoolName"
        label="毕业院校"
        align="center"
        width="100"
      />
      <el-table-column
        prop="major"
        label="专业"
        align="center"
        width="70"
      />
      <el-table-column
        prop="eduLevel"
        label="最高学历"
        align="center"
        width="100"
      />
      <el-table-column
        prop="degreeLevel"
        label="最高学位"
        align="center"
        width="100"
      />
      <el-table-column
        prop="endEduTime"
        label="毕业时间"
        align="center"
        width="95"
      />
      <el-table-column
        prop="workExperience"
        label="学习及工作经历"
        align="center"
        width="160"
      />
      <el-table-column
        prop="scientificPayoffs"
        label="科研成果"
        align="center"
        width="160"
      />
      <el-table-column
        prop="intendedPost"
        label="意向岗位"
        align="center"
        width="160"
      />
      <el-table-column
        prop="recruitSessions"
        label="招聘场次"
        align="center"
        width="160"
      />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      next-text="下一页"
      layout="prev, pager, next, jumper"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      :auto-scroll="false"
      @pagination="getList"
    />
  </el-card>
</template>

<script>
import waves from "@/directive/waves"; // waves directive
import { statisticsFillInInfo, fillInInfoExportXls } from "@/api/charts";
import { exportFile } from "@/utils/export";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import store from "@/store";
import sitem from "@/components/searchItem";
export default {
  directives: { waves },
  components: {
    Pagination,
    sitem,
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        id: "",
        username: "", //姓名
        sex: "", //性别
        birthDay: "", //出生日期
        birthPlace: "", //籍贯
        eduLevel: "", //最高学历
        degreeLevel: "", //最高学位
        schoolName: "", //毕业院校
        major: "", //专业
        endEduTime: "", //毕业时间
        address: "", //通讯地址
        phone: "", //电话
        workExperience: "", //学习及工作经历
        scientificPayoffs: "", //科研成果
        intendedPost: "", //意向岗位
        recruitSessions:"",//招聘场次
        channel:"",//招聘场次
      },
      parms: null,
    };
  },
  async created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      const parms = JSON.parse(JSON.stringify(this.listQuery));
      this.prams = parms;
      statisticsFillInInfo(parms).then((response) => {
        console.info(response)
        this.list = response.result.records;
        this.total = response.result.total;
        this.listLoading = false;
      });
    },
    handleFilter() {
      console.log(this.listQuery);
      this.listQuery.pageNo = 1;
      this.getList();
    },
    exportExcel() {      
      let parms = null;
      parms = Object.assign({}, this.prams);
      fillInInfoExportXls(parms).then((response) => {
        exportFile(response);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.filter-container {
  line-height: 36px;
  font-size: 14px;
  margin-bottom: 10px;
  .filter-item {
    margin-bottom: 0;
  }
}
.custom-header {
  line-height: 32px;
  .filter-item {
    display: inline-block;
    vertical-align: middle;
  }
}
</style>
